<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>

			body{
				background: #0284b8;
			}
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #fff;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			#reg{color:#FFFFFF;}
			#forgetPassword{color:#FFFFFF;}
			#login{ background:#fd933b;}
			#login-form{width: 280px; margin:0 auto;}
			.mui-input-group{ background:#2997ce;}
			.mui-input-headr{width: 100%; text-align: center; margin-bottom: 20px;}
			.mui-input-headr a{line-height: 50px; font-size:26px; color:#FFFFFF; font-family: "微软雅黑";}
			.mui-input-headr img{ margin:0 auto; display:block; padding-top:130px;}
			.mui-input-group label{ color: #FFFFFF;}
			.mui-table-view{ background:#2997ce;}
			.mui-table-view-cell{ color: #FFFFFF;}
			.mui-input-row label{ width:25%;}
			.mui-btn-block{ width:100%; height: 40px; padding: 0; border-radius: 20px;}
			.button-width{width: 280px; margin: 0 auto;}
		</style>

	</head>

	<body>
		<div class="mui-content">
			<div class="mui-input-headr">
				<img src="images/logo.png" width="120" />
				<a>海南省基层卫生医疗系统</a>
			</div>
			<form id='login-form'>
				<div class="mui-input-row">
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号" style="border: 1px solid #76c2e0; border-radius: 20px; float: left;">
				</div>
				<div class="mui-input-row">
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码" style="border: 1px solid #76c2e0; border-radius: 20px; float: left;">
				</div>
			</form>
			<div class="mui-content-padded button-width">
				<button id='login' onclick="login()" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min-1.11.1.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/request.js"></script>
		<script src="js/app.js"></script>
		<script>
			//测试yangyang
			mui.init();

			function login() {
				var userName = $("#account").val();
				var password = $("#password").val();
				if (userName == "") {
					alert("请输入用户名！");
					$("#account").attr("placeholder", '请输入用户名');
					$("#account").css("color", "red")
				} else if (password == "") {
					alert("请输入密码！");
				} else {
					$.ajax(getRequestUrl.url+"/mobile/sys/DoctorUser/getDocByUserCode",{
						data:{
							"user_code": userName,
							"password": password
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						success:function(data){
							if (data.status == 1) {
								mui.openWindow({
									url: 'index.html',
									id: 'index'
								});
								var id = data.obj.id;
								var datat = JSON.stringify(data)
								localStorage.setItem("name", datat);
							} else {
								alert("账号密码错误！");
							}
						},
						error:function(xhr,type,errorThrown){
							
						}
					});
				}
			}
		</script>
	</body>

</html>
